<template>
	<view>
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="0" @refresh="onPulldownReresh">
		<view class="selectbox">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="flList" range-key="name">
							<view class="uni-input">
								{{flList[index].name}}
								<image src="../../static/icon_more.png" mode=""></image>
							</view>
						</picker>
					</view>
					<view class="uni-list-cell-db">
						<uni-search-bar @confirm="search" :placeholder="'搜索行业'" @input="input" />
					</view>
					<view class="uni-list-cell-db">
						<uni-search-bar @confirm="search" :placeholder="'搜索专家'" @input="input1" />
					</view>
				</view>
			</view>
		</view>
		<!-- <view>
			<uni-search-bar @confirm="search" :placeholder="'搜索行业'" @input="input" />
			<uni-search-bar @confirm="search" :placeholder="'搜索专家'" @input="input1" />
		</view> -->
		<scroll-view class="panel-scroll-box" :scroll-y="true" @scrolltolower="loadMore" :style="{height: 'calc(100% - ' + pageTop + 'px)'}">
		<view class="uni-list">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" 
					v-for="(item,index) in dataList"
					:key='index'
					v-if="item.is_publish==1"
				>
					<view class="uni-media-list" @click="playfun(item.id,item.vip_status,item.price)" >
						<image class="uni-media-list-logo" :src="item.cover"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{item.title}}</view>
							<view class="uni-media-list-text-bottom">
								<text>
									<!-- <text class="tap tapDr">置顶</text> -->
									<text class="tap tapbu" v-for="(v,i) in item.tags" :key='i'>{{v}}</text>
									<!-- <text class="tap tapbu">调研</text> -->
								</text>
							</view>
							<view class="time">
								<text>{{item.updatetime}}</text>
								<image class="play" src="../../static/play.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</scroll-view>
		</mix-pulldown-refresh>
		<!-- 弹窗 -->
		<view class="cgts" v-if="showSuccess">
			<view>
				<uni-icons :type="'close'" :size="'30'" @click="showSuccess=false"></uni-icons>
				<text>您现在不能查看，需要提升会员等级或者单独购买！</text>
				<view class="buts">
					<button type="primary" @click="pay">￥{{price}}</button>
					<button type="primary" @click="chargeVip">提升会员</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh'
	import mixLoadMore from '@/components/mix-load-more/mix-load-more'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniSearchBar,
			mixPulldownRefresh,
			mixLoadMore,
			uniIcons
		},
		data() {
			return {
				flList: [],
				index: 0,
				
				cart_id:'',
				profession: '',//行业
				auth: '',//专家
				
				pageTop:uni.upx2px(270),
				page:1,
				rows:10,
				dataList:[],
				loadMoreStatus:false,
				
				showSuccess:false,
				price:'0',//给钱看要的价格
				newsid:'',//给钱看要的id
			};
		},
		onLoad(){
			this.keVideolist();
			this.keCartlist();
		},
		methods: {
			search(res) {
				this.page=1;
				this.keVideolist('refresh');
			},
			input(res) {
				this.profession = res.value
			},
			input1(res) {
				this.auth = res.value
			},
			bindPickerChange: function(e) {
				
				this.index = e.target.value;
				this.cart_id = this.flList[this.index].id;
				this.page=1;
				this.keVideolist('refresh');
			},
			//下拉
			onPulldownReresh(){
				this.page=1;
				this.keVideolist('refresh');
			},
			//加载下一页
			loadMore(){
				this.page++;
				this.keVideolist();
			},
			//获取列表
			keVideolist(type){
				this.loadMoreStatus = true;
				var _this = this;
				uni.request({
					url:this.$API.keVideolist,
					method:"POST",
					data:{page:this.page,rows:this.rows,where:'{profession:"'+this.profession+'",auth:"'+this.auth+'",cart_id:"'+this.cart_id+'"}'},
					header:this.$API.get_head(),
					complete() {
						_this.loadMoreStatus = false;
					},
					success: (res) => {
						var data = res.data.rows;
						data.forEach(function(v,i){
							if(data[i].tags!==null){
								data[i].tags=v.tags.split(',');
							}
						})
						if(type === 'refresh'){
							_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
							_this.dataList = data;
						}else{
							_this.dataList = _this.dataList.concat(data);
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//获取分类列表
			keCartlist(id){
				var _this = this;
				uni.request({
					url:this.$API.keCartlist,
					method:"POST",
					header:this.$API.get_head(),
					success: (res) => {
						res.data.rows.unshift({id: '', name: "全部分类", pid: 0, cover: "321"})
						_this.flList=res.data.rows;
						_this.cart_id = res.data.rows[0].id
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//立即购买文章
			pay() {//获取支付信息
				let _this = this;
					uni.request({
						url: this.$API.wxpay,
						method:"GET",
						data: {
							pay_price: parseInt(this.price * 100),
						},
						success: (result) => {
							var orderInfo = result;
							if (orderInfo.statusCode != 200) {
								uni.showModal({
									content: "获得订单信息失败",
									showCancel: false
								})
								return;
							}
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo.data,
								success: (e) => {
									uni.showModal({
										content: "支付成功",
										showCancel: false,
										success() {
											_this.buyNews();
										}
									});
									
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false
									})
								},
								complete: () => {
									
								}
							})
						},
						fail: (e) => {
							// res(result)
						}
					})
			},
			//支付之后录入
			buyNews(){
				var _this = this;
				uni.request({
					url:this.$API.isBuy,
					method:"GET",
					data:{
						userid:uni.getStorageSync("userid"),
						newsid:this.newsid,
						type:'vedios'
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data){
							_this.showSuccess = false;
							// uni.navigateTo({
							// 	url: '/pages/news/list2detail-detail?data=' + e
							// })
						}else{
							_this.showSuccess = true;
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//跳转到购买会员
			chargeVip(){
				uni.navigateTo({
					url:"/pages/newpages/vip"
				})
			},
			//跳转详情页面
			playfun(e,needvip,price) {
				this.price = price;
				this.newsid = e;
				var _this = this;
				if(uni.getStorageSync("vip_status") < needvip){
					//检查是否购买了该文章
					uni.request({
						url:this.$API.isBuy,
						method:"GET",
						data:{
							userid:uni.getStorageSync("userid"),
							newsid:e,
							type:'vedios'
						},
						header:this.$API.get_head(),
						success: (res) => {
							if(res.data){
								_this.showSuccess = false;
								uni.navigateTo({
									url: 'weiketang-play?data=' + e
								})
							}else{
								_this.showSuccess = true;
							}
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					})
					return false;
				}
				uni.navigateTo({
					url: 'weiketang-play?data=' + e
				})
			},
		}
	}
</script>

<style>
.uni-list-cell-db{
	text-align: center;
}
.uni-list-cell-db image{
	width:30upx;
	height:30upx;
	vertical-align:middle;
	margin-left:10upx;
}
.uni-media-list-logo {
	width: 180upx;
	height: 140upx;
	/* margin-left:20upx; */
	margin-right: 20upx;
}

.uni-media-list-body {
	height: auto;
	justify-content: space-around;
}
.uni-media-list-body .time{
	font-size:20upx;
	color:#666;
}
.uni-media-list-body .time .play{
	width:50upx;
	height:50upx;
	/* float:right; */
	position:absolute;
	right:30upx;
	bottom:30upx;
}
.uni-media-list-text-top {
	height: 74upx;
	font-size: 28upx;
	overflow: hidden;
}

.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.tap {
	/* border:1px solid #000000; */
	font-size:16upx;
	color: #000000;
	padding:4upx 7upx;
	margin-right:10upx;
	border-radius:10upx;
	background:#D0D0D0;
}
/* .tap.tapDr{
	border-color: #F43530;
	color: #F43530;
}
.tap.tapbu{
	border-color: #6AAFF5;
	color:  #6AAFF5;
} */

.navigator-hover{
	opacity:1;
	background:none;
}


/*弹窗*/
	.cgts{
		width: 100%;
		height: 100%;
		background: #007AFF;
		position: fixed;
		top:0;
		background: rgba(0,0,0,.5);
		z-index:999;
	}
	.cgts>view{
		width: 460upx;
		height: 320upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius:10upx;
		background: #fff;
		box-sizing: border-box;
		padding:70upx 38upx;
		position:relative;
	}
	.cgts .uni-icon.uni-icon-close{
		position: absolute;
		right:20upx;
		top:20upx;
	}
	.cgts text{
		font-size:30upx;
		font-family:Microsoft YaHei;
		font-weight:bold;
		text-align: center;
		display: block;
		width: 100%;
		margin-bottom: 45upx;
		color:rgba(66,66,66,1);
	}
	.cgts .buts{
		display: flex;
		justify-content: space-around ;
	}
	.cgts .buts button{
		width:170upx;
		font-size:28upx;
		display: inline-block;
	}
	.cgts .buts button:first-child{
		background-color:transparent;
		border:none;
		color: #D81E06;
	}
</style>